<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>注意事项</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	<!-- 
		几个注意点：
			1.关于组件名:
				一个单词组成：
					第一种写法(首字母小写)：school
					第二种写法(首字母大写)：School
				多个单词组成：
					第一种写法(kebab-case命名)：my-school
					第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
				备注：
					(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
					(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

			2.关于组件标签:
				第一种写法：<school></school>
				第二种写法：<school/>
				备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

			3.一个简写方式：
				const school = Vue.extend(options) 可简写为：const school = options
	-->
		<div id="root">
			<my-school></my-school>
			<student></student>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		// 创建组件
		const mySchool = Vue.extend({
			// 指定Vue中开发工具中显示的名称
			name:'school',
			template: `
				<div>
					<h2>学校名称：{{schoolName}}</h2>
				</div>
			`,
			data(){
				return {schoolName: "广技师",address: "广州天河区"}
			},
		})
		// 创建组件（简写方式）
		const student = {
			template: `
				<div>
					<h2>姓名：{{name}}</h2>
				</div>
			`,
			data(){
				return {name:'tom'}
			},
		}
		new Vue({
			el: "#root",
			components:{
				// 多个单词推荐写法
				'my-school':mySchool,
				student
			}
		})
	</script>
</html>